<template>
  <div class="rent-detail">
    <head-top goBack="true" head-title="房屋租售"></head-top>
    <div class="descript">
      <avatar class="avt" :list="list"></avatar>
      <desc-pic :list="list"></desc-pic>
      <div class="read_number">
        <span>阅读量：{{list.reading_amount}}</span>
      </div>
    </div>
    <div class="comment-wrapper">
      <Comment :list="list" :lists="lists" @passMethods="_getRentData" v-if="flag"></Comment>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import avatar from '../common/avatar.vue'
  import descPic from '../common/desPic.vue'
  import Comment from '../common/comment.vue'
  import { getRentData } from '../../api/publishList.js'

  export default {
    name: 'RentDetail',
    data () {
      return {
        list: {},
        lists: [],
        flag: false
      }
    },
    components: {
      headTop,
      avatar,
      descPic,
      Comment
    },
    created () {
      this._getRentData()
    },
    methods: {
      _getRentData () {
        getRentData(this.$route.params.id).then(res => {
          if (res.code === 200) {
            this.list = res.data.house
            this.lists = res.data.comment
            this.flag = true
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .rent-detail {
    background-color: #fff;
    .descript {
      padding-top: 40px;
      border-bottom: 10px solid #f2f2f2;
      .read_number {
        width: 100%;
        height: 30px;
        text-align: right;
        border-top: 1px solid #f2f2f2;
        span {
          font-size: 13px;
          line-height: 30px;
          padding-right: 10px;
          color: #777777;
        }
      }
    }
  }
</style>
